<template>
  <div class="home_page">
    <div class="title">首页超级cnavas</div>
    <div class="content">
      <div class="btn_list">
        <div class="btn_item"
             @click="item.func()"
             v-for="(item,index) in listInfo"
             :key="index">{{item.text}}</div>
      </div>
    </div>
    <div class="footer"> </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  mixins: [],
  components: {},
  data() {
    return {
      listInfo: [
        {
          text: "前往canvas",
          func: () => {
            this.$router.push({ name: "Canvas" });
          }
        },
        {
          text: "前往详情",
          func: () => {
            console.log("前往详情", "<<<---------------  ");
          }
        },
        {
          text: "爱哪去哪",
          func: () => {
            console.log("爱哪去哪", "<<<---------------  ");
          }
        }
      ]
    };
  },
  props: {},
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  destroyed() {}
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/scss/common.scss";
.home_page {
  .title {
    width: 100%;
    height: 44px;
    border-bottom: 1px solid #dbdbdb;
    @include flx-dsp($drt: row, $jsc: center, $ali: center);
  }
  .content {
    width: 100%;
    .btn_list {
      width: 100%;
      border: 1px solid #333;
      box-sizing: border-box;
      @include flx-dsp($drt: column, $jsc: center, $ali: center);
      .btn_item {
        width: 40vw;
        height: 4vh;
        border: 1px solid #333;
        border-radius: 6px;
        background-color: rgba(222, 222, 222, 0.2);
        margin: 15px 0;
        @include flx-dsp($drt: row, $jsc: center, $ali: center);
        &:active {
          background-color: rgba(96, 96, 96, 0.4);
        }
      }
    }
  }
}
</style>